import React, { Component } from 'react';
import { List, InputItem , Button,TextareaItem } from 'antd-mobile';
import { Link } from "react-router-dom";
import Header from '../header/index';
import Http from '../../axios/http';
import Api from '../../api/index';
import './index.scss';

export default class ProductDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            productObj: {}
        }
    }
    componentDidMount() {
        Http.get(Api.GET_SINGLE_STAR, {
            _id: this.props.match.params.id
        }).then(res => {
            this.setState({
                productObj: res
            })
        })
    }
    render() {
        return (
            <div>
                <Header title="产品详情" />
                <ProductItem pro={JSON.stringify(this.state.productObj)} />
            </div>
        )
    }
}

class ProductItem extends Component {
    render() {
        const item = JSON.parse(this.props.pro);
        return (
            <div>
                <img width="100%" src={`${window.location.protocol}//${window.location.hostname}:3000/${item.logo}`} alt="" />
                <BasicInputExample item={item} />
                <Link to="/Start/longList">
                    <button className="primary btn-primary">明星对比</button>
                </Link>
                <Button className="btn-primary" type="primary"></Button>
            </div>
        )
    }
}

class BasicInputExample extends React.Component {
    componentDidMount() {
    }
    handleClick = () => {
    }
    render() {
        const item = this.props.item;
        return (
            <div>
                <List renderHeader={() => ''}>
                    <InputItem
                        ref={el => this.autoFocusInst = el}
                        value={item.name}
                        disabled
                    >姓名</InputItem>
                    <InputItem
                        ref={el => this.inputRef = el}
                        value={item.hobby}
                        disabled
                    >爱好</InputItem>
                    <InputItem
                        ref={el => this.inputRef = el}
                        value={item.livesong}
                        disabled
                    >歌曲</InputItem>
                    <InputItem
                        ref={el => this.inputRef = el}
                        value={item.address}
                        disabled
                    >地址</InputItem>
                    <TextareaItem
                        title="详细信息"
                        data-seed="logId"
                        value={item.detailed}
                        ref={el => this.autoFocusInst = el}
                        rows="2"
                        disabled
                    />
                </List>
            </div>
        );
    }
}
